<html>
<title>Facebook Timeline Design with jquery and CSS</title>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="resources/css/app.css"/>
<link rel="stylesheet" type="text/css" href="resources/css/style_chitiet.css"/>
<link rel="stylesheet" type="text/css" href="resources/css/liveurl.css"/>

<script src="resources/js/sockjs-0.3.4.js"></script>
<script src="resources/js/stomp.js"></script>
<script src="resources/js/jquery-1.7.min.js"></script>
<script src="resources/js/jquery.masonry.js"></script>
<script src="resources/js/jquery.liveurl.js"></script>
<script src="resources/js/jquery.facebook.js"></script>
<!--script type="text/javascript" src="http://viralpatel.net/blogs/demo/jquery/jquery.shorten.1.0.js"></script-->
<script src="resources/js/readmore.js"></script>
<script src="resources/js/jquery.lazy.js"></script>
<script src="resources/js/jquery.lazyload-any.js"></script>
<script src="resources/js/commentvl.js"></script>


</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


 <div id="containertop" >
 <div id="head-wrapper">
    	<div id="head-bar">
    		<div class="head-menu"><p class="head-font"><a href="Index.html" target="_blank">New</a></div>
            <div class="head-menu"><p class="head-font">Status</p></div>
            <div class="head-menu"><p class="head-font"><a href="Hinh.html" target="_blank">Pictures</a></p></div>
            <div class="head-menu"><p class="head-font"><a href="Video.html" target="_blank">Videos</a></p></div>
            
   	 	</div>
    </div>
    
 <b>What's Up?</b><br/>
<textarea id='commentvl' placeholder="What's on your mind?"></textarea>
<input type='submit' value=' Post ' id='postCommentvl'/>
 
 <div class="liveurl-loader"></div>
 <div class="liveurl">
    <div class="close" title="Entfernen"></div>
    <div class="inner">
        <div class="image"> </div>
        <div class="details">
            <div class="info">
                <div class="title"> </div>
                <div class="description"> </div> 
                <div class="url"> </div>
            </div>

            <div class="thumbnail">
                <div class="pictures">
                    <div class="controls">
                        <div class="prev button inactive"></div>
                        <div class="next button inactive"></div>
                        <div class="count">
                            <span class="current">0</span><span> von </span><span class="max">0</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="video"></div>
        </div>

    </div>
</div>
 
</div>	
  <div id="container">  	
       <div class="timeline_container">
            <div class="timeline">
                <div class="plus"></div>
            </div>
        </div>
	 	
        <div id="result"></div>
        <div id="last_msg_loader" class="msg_loader"></div>
                
        <a href="#" class="scrollToTop" title="Go to top"/>                      
  </div>  	
	
<script>

const itemPost = 10;

var stompClient = null;
var curImages = new Array();
var arrPostId = new Array();
var url = null;
var story = null;
var contents = null;
var pic = null;
var youtubeKey = null;
var type = null;
var urlData = null;
var offset = 0;
var bolFetch = false;

function setConnected(connected) {
    /*document.getElementById('connect').disabled = connected;
    document.getElementById('disconnect').disabled = !connected;
    document.getElementById('calculationDiv').style.visibility = connected ? 'visible' : 'hidden';
    document.getElementById('calResponse').innerHTML = '';*/
}

var socket = new SockJS('/commentvl/ws');
stompClient = Stomp.over(socket);
 stompClient.connect({}, function(frame) {
     setConnected(true);
     console.log('Connected: ' + frame);	        
     
     //get message of this user
     stompClient.subscribe('/user/queue/data', function(dataForUser){
     	getDataForUser(dataForUser);
     });
     
   //get message for all user
     stompClient.subscribe('/topic/posts', function(post){
     	getDataBroadcast (post);
     });	      	     
 });

function disconnect() {
   stompClient.disconnect();
   setConnected(false);
   console.log("Disconnected");
}	

function getDataForUser(dataForUser) {
	var obj = JSON.parse(dataForUser.body);
	var type = obj.type;
	if (type == 'load') {
		loadData (obj.data);
		//get offset of Post
		offset = obj.offset;
		bolFetch = obj.fetch;
		
		jQuery('#container').masonry( 'reload' );
		Arrow_Points();
	}
	else if (type == 'add')  {
		addNewPost (obj.data);
		clearPost ();
		
		jQuery('#container').masonry( 'reload' );
		//updateArrowPoint();		
		removeArrow();
		Arrow_Points();
	}
	else if (type == 'fetch') {
		loadData (obj.data);
		offset = obj.offset;
		bolFetch = obj.fetch;
		jQuery('div#last_msg_loader').empty();
		
		jQuery('#container').masonry( 'reload' );
		Arrow_Points();
	}
}

//get data broadcast
function getDataBroadcast(dataForBroadcast) {
	/*var arrayOfObjects = eval(post.body);
	var len = arrayOfObjects.length;
	
	 var response = document.getElementById('calResponse');
     var p = document.createElement('p');
     p.style.wordWrap = 'break-word';
     p.appendChild(document.createTextNode('length : ' + Date.now() + '_'+ len));*/
     //response.appendChild(p);
     //response.innerHTML = 'length : ' + Date.now() + '_'+ len;
	
	//alert (post.body);
	//showPost(JSON.parse(post.body).result);
	var hasNewData = false;
	var obj = JSON.parse(dataForBroadcast.body);
	var type = obj.type;
	if (type == 'new') {
		hasNewData = addNewPost(obj.data);	
	}	
	
	if (hasNewData == true) {
		jQuery('#container').masonry( 'reload' );
		Arrow_Points();	
	}
	
}

function postComment () {	 	
	var contents = jQuery('#commentvl').val();
	if (type == null && contents == '') {
		return;
	}
	else  if (type == null && contents != '') {
		type = "comment";
	}
	var data = getDataPostComment();
	stompClient.send("/commentvl/addpost", {}, data);	
}

function getPosts () {
	stompClient.send("/commentvl/getPosts", {}, JSON.stringify({ 'offset': offset, 'count': itemPost }));
}

function removeArrow() {
	//alert ('remove');
	//var s = jQuery('#container').find('.item');
	var s = jQuery('#container').find('div[id^="item_"]');
	jQuery.each(s,function(i,obj){
		var posLeft = jQuery(obj).css("left");
		jQuery(obj).addClass('borderclass');
		
		var span = jQuery('#' + obj.id).find( "span" );
		span.removeClass( "rightCorner leftCorner" );
		/*if(posLeft == "0px")
		{			
			var span = jQuery('#' + obj.id).find( "span" );			
			if (span.length == 1) {				
				span.removeClass( "rightCorner" );
			}		
		}
		else
		{			
			var span = jQuery('#' + obj.id).find( "span" );
			if (span.length == 1) {
				span.removeClass( "leftCorner" );
			}
		}*/
	});
}

function Arrow_Points()
{ 		
	//var s = jQuery('#container').find('.item');
	var s = jQuery('#container').find('div[id^="item_"]');
	jQuery.each(s,function(i,obj){				
		var posLeft = jQuery(obj).css("left");
		jQuery(obj).addClass('borderclass');
		var span = jQuery('#' + obj.id).find( "span" );
		if(posLeft == "0px")
		{									
			//var span = jQuery(obj).find( "span.rightCorner" ).length;			
			if (span.length == 0) {
				html = "<span class='rightCorner'></span>";		
				jQuery(obj).prepend(html);
			}
			else {
				span.addClass("rightCorner");
			}
			
			//var s = jQuery('#' + obj.id).find( "span" );
			//alert (s);
			//s.removeClass( "rightCorner" );
			//jQuery(obj).prepend(html);			
		}
		else
		{			
			//var span = jQuery(obj).find( "span.leftCorner" ).length;
			//var span = jQuery('#' + obj.id).find( "span" );
			if (span.length == 0) {
				html = "<span class='leftCorner'></span>";		
				jQuery(obj).prepend(html);
			}
			else {
				span.addClass("leftCorner");
			}
			//jQuery(obj).prepend(html);
		}
	});
}

function updateArrowPoint () {
	var s = jQuery('#container').find('.item');
	jQuery.each(s,function(i,obj){
		var posLeft = jQuery(obj).css("left");
		jQuery(obj).addClass('borderclass');
		if(posLeft == "0px")
		{			
			var rightCorner = jQuery(obj).find(".rightCorner");
			if (rightCorner != null) {
				alert ('rightCorner');
			}			
		}
		else
		{
			var leftCorner = jQuery(obj).find(".leftCorner");
			if (leftCorner != null) {
				alert ('leftCorner');
			}
			//html = "<span class='leftCorner'></span>";
			//jQuery(obj).prepend(html);
		}
	});
}

function clearPost () {
	var liveUrl = jQuery('.liveurl');
    liveUrl.hide('fast');
    liveUrl.find('.video').html('').hide();
    liveUrl.find('.image').html('');
    liveUrl.find('.controls .prev').addClass('inactive');
    liveUrl.find('.controls .next').addClass('inactive');
    liveUrl.find('.thumbnail').hide();
    liveUrl.find('.image').hide();
    
    liveUrl.find('.title').text('');
    liveUrl.find('.description').text('');
    liveUrl.find('.url').text('');

    jQuery('textarea#commentvl').trigger('clear'); 
    curImages = new Array();
    type = null;
    urlData = null;
    
    //clear textarea
    jQuery('textarea#commentvl').val('');
}


jQuery("document").ready(function($){	
	
	$("#postCommentvl").live('click',function() {		
		//-------------------------
		postComment();
		//Reload masonry
		//$('#container').masonry( 'reload' );
		//Arrow_Points();
		
		return false;
	});
	
	//delete comment...
	$(".deletebox").live('click',function()
	{
		if(confirm("Are your sure?"))
		{
			$(this).parent().fadeOut('slow');  
			//Remove item
			$('#container').masonry( 'remove', $(this).parent() );
			//Reload masonry
			$('#container').masonry( 'reload' );
			$('.rightCorner').hide();
			$('.leftCorner').hide();
			Arrow_Points();
		}
		return false;
	});
	
	$('#container').masonry({itemSelector : '.item',});
	
	//-------------------------------------------
	 $('textarea#commentvl').liveUrl({
         loadStart : function(){
             $('.liveurl-loader').show();
         },
         loadEnd : function(){
             $('.liveurl-loader').hide();
         },
         success : function(data) 
         {                        
        	 urlData = data;
        	 var output = $('.liveurl');
             output.find('.title').text(data.title);
             output.find('.description').text(data.description);
             output.find('.url').text(data.url);
             output.find('.image').empty();                                                 
             
             output.find('.close').one('click', function() 
             {                
            	 clearPost();
             });
             
             output.show('fast');
             
             if (data.video != null) {
                 var ratioW        = data.video.width  /350;
                 data.video.width  = 350;
                 data.video.height = data.video.height / ratioW;

                 var video = 
                 '<object width="' + data.video.width  + '" height="' + data.video.height  + '">' +
                     '<param name="movie"' +
                           'value="' + data.video.file  + '"></param>' +
                     '<param name="allowScriptAccess" value="always"></param>' +
                     '<embed src="' + data.video.file  + '"' +
                           'type="application/x-shockwave-flash"' +
                           'allowscriptaccess="always"' +
                           'width="' + data.video.width  + '" height="' + data.video.height  + '"></embed>' +
                 '</object>';
                 output.find('.video').html(video).show();
                 type = 'video';
             }             
         },
         addImage : function(image)
         {   
             var output  = $('.liveurl');
             var jqImage = $(image);
             jqImage.attr('alt', 'Preview');
             
             if ((image.width / image.height)  > 7 
             ||  (image.height / image.width)  > 4 ) {
                 // we dont want extra large images...
                 return false;
             } 
             curImages.push(jqImage.attr('src'));
             output.find('.image').append(jqImage);
                          
             if (curImages.length == 1) {
                 // first image...                 
                 output.find('.thumbnail .current').text('1');
                 output.find('.thumbnail').show();
                 output.find('.image').show();
                 jqImage.addClass('active');
                 if (urlData.description == '') {
                	 type = 'picture';
                 }
                 else if (urlData.description != '' && type == null) {
                	 type = 'news';
                 } 
             }
             
             if (curImages.length == 2) {
                 output.find('.controls .next').removeClass('inactive');
             }
             
             output.find('.thumbnail .max').text(curImages.length);            
         }
     });
   
   
     $('.liveurl ').on('click', '.controls .button', function() 
     {
         var self        = $(this);
         var liveUrl     = $(this).parents('.liveurl');
         var content     = liveUrl.find('.image');
         var images      = $('img', content);
         var activeImage = $('img.active', content);

         if (self.hasClass('next')) 
              var elem = activeImage.next("img");
         else var elem = activeImage.prev("img");

         if (elem.length > 0) {
             activeImage.removeClass('active');
             elem.addClass('active');  
             liveUrl.find('.thumbnail .current').text(elem.index() +1);
             
             if (elem.index() +1 == images.length || elem.index()+1 == 1) {
                 self.addClass('inactive');
             }
         }

         if (self.hasClass('next')) 
              var other = elem.prev("img");
         else var other = elem.next("img");
         
         if (other.length > 0) {
             if (self.hasClass('next')) 
                    self.prev().removeClass('inactive');
             else   self.next().removeClass('inactive');
        } else {
             if (self.hasClass('next')) 
                    self.prev().addClass('inactive');
             else   self.next().addClass('inactive');
        }               
        
     });	    
     
     $(window).scroll(function() {
   	    if($(window).scrollTop() == $(document).height() - $(window).height()) {
   	        // call web service to get data
   	        if (bolFetch == true) {
   	        	setTimeout(function () {    
   	        		getPosts ();	
				}, 3000);
   	        	
   	        	$('div#last_msg_loader').html('<img src="resources/images/loading.gif" alt="Loading" /> Loading...');
   	        }
   	    }
   	    
   		//Check to see if the window is top if not then display button
   	 	if ($(this).scrollTop() > 100) {
			$('.scrollToTop').fadeIn();
		} else {
			$('.scrollToTop').fadeOut();
		}
   	 	
   	 });         
     
   //Click event to scroll to top
 	$('.scrollToTop').click(function(){
 		$('html, body').animate({scrollTop : 0},800);
 		return false;
 	});    
});

jQuery(window).load(function () {
	//stompClient.send("/commentvl/fristLoad", {}, JSON.stringify({ 'start': 0, 'end': 10 }));
	stompClient.send("/commentvl/firstLoad", {}, JSON.stringify({}));

    //setTimeout(function () {
        //alert('page is loaded and 1 minute has passed');
    //	stompClient.send("/commentvl/firstLoad", {}, JSON.stringify({}));
    //}, 1000);

});
</script>
</body>
</html>